<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        img{
            vertical-align: top;
            width: 100%;
        }
        div{
           width: 70%;
            margin:0 auto;
        }
    </style>
</head>
<body>
<img src="image/top.png" alt="">
<img src="image/nav.png" alt="" id="nav">
<div><img src="image/body01.png" alt="">
<img src="image/body02.png" alt="">
</div>

<script>
    window.onscroll = function () {
        var nav = document.getElementById('nav');
        //获取网页滚动的时候的top值
        var mysroll = document.body.scrollTop || document.documentElement.scrollTop;
        //获取要定位的图片距离网页顶部的初始值
        var top = nav.offsetTop;
        //判断，让网页滚动时的top大于图片离网页顶部的高度时让它固定定位
        if(mysroll>top){
            nav.style.position = 'fixed';
            nav.style.top = '0';
            nav.style.left = '0';
        }else{
            nav.style.position = 'static';
        }
    }

</script>
</body>
</html>